<template>
  <div class="canvas">
    <div class="canvas-center">
      <div class="canvas-center-drag">
        <schema-content-item
          :componentList="content.model.componentList || []"
          @getItemData="handleItemData"
        ></schema-content-item>
        <el-tooltip effect="light" content="组件设置" placement="bottom">
          <div
            class="canvas-center-drag-set flex-center"
            @click="content.curComponent = null"
          >
            <i class="el-icon-setting"></i>
          </div>
        </el-tooltip>
      </div>
    </div>
    <!-- left -->
    <div class="canvas-left">
      <draggable
        v-model="cmpConfig"
        :group="itxst"
        :sort="false"
        animation="300"
        item-key="id"
        :clone="handleClone"
      >
        <template #item="{ element }">
          <div class="canvas-left-item">
            <span class="f13">{{ element.label }}</span>
            <span class="canvas-left-item-type">{{ element.type }}</span>
          </div>
        </template>
      </draggable>
    </div>
    <!-- right -->
    <div class="canvas-right">
      <component
        v-if="content.curComponent"
        :is="curComponentConfig"
      ></component>
      <schema-component v-else></schema-component>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, computed } from "vue";
import SchemaContentItem from "./SchemaContentItem.vue";
export default defineComponent({
  components: {
    SchemaContentItem,
  },
  setup() {
    const content: any = inject("content");
    const cmpConfig = inject("cmpConfig");
    console.log(cmpConfig);

    const handleClone = (e: any) => {
      return {
        ...e,
        id: "1654849619Dk9aD5QA",
        property: "array_x5",
      };
    };

    const handleItemData = (e: any) => {
      console.log('拖拽获取元素', e.value);
      content.model.componentList = e.value;
    };

    const curComponentConfig = computed(() => {
      return `${content?.curComponent?.component}Config`;
    });
    return {
      itxst: { name: "itxst", pull: 'clone', put: true },
      curComponentConfig,
      handleItemData,
      content,
      cmpConfig,
      handleClone,
    };
  },
});
</script>

<style lang="scss" scoped>
.canvas {
  height: 100%;
  padding-left: 200px;
  padding-right: 300px;
  background: #f7f8fa;
  border: 0.02666667rem solid #e4e7ed;
  &-center {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    overflow: auto;
    .canvas-center-drag {
      width: 360px;
      background: #fff;
      margin: 20px auto;
      box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.1); /*no*/
      min-height: 600px;
      .canvas-center-drag-set {
        position: absolute;
        top: 40px;
        left: 450px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        i {
          font-size: 22px;
          color: #b0afb2;
        }
      }
    }
  }
  &-left {
    float: left;
    width: 200px;
    height: 100%;
    left: -200px;
    margin-left: -100%;
    position: relative;
    padding: 0 10px;
    box-sizing: border-box;
    background: #fff;
    .canvas-left-item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      width: 90px;
      padding: 15px 0;
      font-size: 12px;
      color: #666;
      cursor: pointer;
      &:hover {
        color: #fff;
        background: #155bd4;
      }
      .canvas-left-item-type {
        margin-top: 10px;
        color: #c1c5d1;
      }
    }
  }
  &-right {
    float: left;
    width: 300px;
    height: 100%;
    margin-left: -300px;
    position: relative;
    left: 300px;
  }
}
</style>
